/**
 * 支付管理 支付配置信息
 */
<template>
  <div>
    <!-- 成员管理 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>成员管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="成员管理" name="first">
        <!--列表-->
        <el-table size="small" @selection-change="selectChange" :data="datalist" highlight-current-row style="width: 100%;">
          <el-table-column align="center" sortable prop="name" label="账号" width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="info" label="信息" width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="gender" label="性别" width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="age" label="年龄" width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="icon" label="头像" min-width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="thirdParty" label="邮箱" min-width="200">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <span>申请成员</span>
          <el-badge :value="unConfirmTotal" class="item">
          </el-badge>
        </template>
          <!--列表-->
        <el-table size="small" @selection-change="selectChange" :data="applyList" highlight-current-row style="width: 100%;">
          <el-table-column align="center" sortable prop="name" label="账号" width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="info" label="信息" width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="gender" label="性别" width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="age" label="年龄" width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="icon" label="头像" min-width="200">
          </el-table-column>
          <el-table-column align="center" sortable prop="thirdParty" label="邮箱" min-width="200">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      datalist:[],
      applyList:[],
      unConfirmTotal:10
    }
  },
  // 注册组件
  components: {
  },
  /**
   * 创建完毕
   */
  created() {
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
    selectChange(){

    },
    selectChangeApply(){

    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.custom-tabs-label{
  margin-top: 10px;
  margin-right: 40px;
}
</style>

 
 